<template>
	<view class="content">
		<!-- <navbar title='我的订单'>
		</navbar> -->
		<u-sticky offset-top="0" h5-nav-height="0">
			<!-- #ifdef APP-PLUS -->
			<view class="immerse"></view>
			<!-- #endif -->
			<view class="headview">
				<image class="icon_backs" @click="getfan" src="/static/img/icon_backs.png"></image>
				<view class="headtab">
					<view class="tabview" @click="headClick(1)">我的订单</view>
					<!-- <view class="tabview" :class="isHead==2?'tactive':''" @click="headClick(2)">团队订单</view> -->
					<!-- <view class="tabview" :class="isHead==3?'tactive':''" @click="headClick(3)">我的名片</view> -->
				</view>
				<!-- <text class="mexuan" @click="gettandin">{{ leiinfo.label?leiinfo.label:'我的订单' }}</text> -->
			</view>
			<view class="sview">
				<view class="newsouview">
					<image class="souicon" src="/static/img/souicon.png"></image>
					<u-input v-model="keyword" type="text" :border="false" placeholder="请输入"/>
					<text class="soutit" @click="getClear">搜索</text>
				</view>
			</view>
			<view class="wrap">
				<u-tabs :list="tablist" :is-scroll="false" :current="current" @change="tabchange" active-color="#2291FC" inactive-color="#666666"></u-tabs>
			</view>
		</u-sticky>
		<view class="fone plr">
			<view class="headcontent" v-if="isHead==2">
				
				<view class="chadin">
					<u-checkbox v-model="checked" @change="changecheck" active-color="rgba(29, 141, 253, 1)">只看有收益订单</u-checkbox>
				</view>
				<u-parse :html="teaminfo.content"></u-parse>
			</view>
			<view class="newlist" v-if="list.length > 0">
				<view class="newitem" v-for="(item, index) in list" :key="index">
					<view class="orderone">
						<text class="dinnum">订单：{{ item.order_no }}</text>
						<image src="/static/img/fuzhi.png" mode="" class="fuzhi" @click="copy(item.order_no)"></image>
						<text class="zt wei">{{item.statusstr}}</text>
					</view>
					<view class="newitem_head"  @click.stop="newitemClick(item)">
						<image :src="item.image?item.image:'/static/img/tuimg.png'" mode="" class="newitem_head_img"></image>
						<view class="newitem_head_right">
							<text class="item_text">产品标题：{{ item.title }}</text>
							<view class="item_texts"><text class="biaohao">业务员：{{ item.salesman }}</text></view>
							<view class="item_texts" v-if="item.tasknum"><text class="biaohao">做单数量：{{ item.tasknum }}</text></view>
							<view class="item_texts" v-if="item.create_at"><text class="biaohao">作业时间：{{ item.create_at }}</text></view>
							<!-- <view class="item_view">
								<text class="item_text" v-for="(i, ind) in item.data"
									:key="ind">{{i.key}}：{{i.value}}</text>
							</view> -->
								
						</view>
					</view>
					<view class="newitem_nav">
						<view class="newitem_nav_item" v-if="item.reason">
							<text>拒绝原因：{{ item.reason }}</text>
						</view>
						<view class="newitem_nav_item" v-if="item.amount">
							<text>订单收益：{{ item.amount }}</text>
						</view>
					</view>
				</view>
			</view>
			<u-empty text="暂无数据" mode="list" v-if="list==''"></u-empty>
			<!-- <view class="list">
				<view class="item" v-for="(item,index) in 100" :key="index">
					<view class="itemone">
						<text class="xname">订单：20240314084848</text>
					</view>
					<view class="itemtwo">
						<view class="fenitem">
							<text class="fen">类型：111</text>
						</view>
						<view class="fenitem">
							<text class="fen">金额：¥222</text>
						</view>
						<view class="fenitem" style="width: 100%;">
							<text class="fen txt">时间:333</text>
						</view>
						
					</view>
				</view>
				<view class="nodata" v-if="list == ''">
					<u-empty text="暂无数据" mode="list" ></u-empty>
				</view>
			</view> -->
		</view>

		<view class="submit-layer" v-if="submitPageShow" @click.self="submitPageShow = false">
			<view class="detail-card">
				<!-- <simple-address ref="simpleAddress" :pickerValueDefault="cityPickerValueDefault" @onConfirm="onConfirm" themeColor="#007AFF"></simple-address> -->
				<view class="detail-card-tit">
					<view class="dinname">订单信息</view>
					<view class="detail-card-view" v-if="newHead == 1">
						<block v-for="(fItem, index) in poplist" :key="'form'+index">
							<view class="detail-edit-title">{{ fItem.namestr }}</view>
							

							<view class="detail-edit-boxs" v-if="fItem.type == 4">
								<view class="ops-box">
									<view class="ops-img"  v-for="(i,ind) in fItem.data" @click="preview(fItem.data,i)">
										<image class="ops-imgitem" :src="i"></image>
									</view>
								</view>
							</view>
							<view class="detail-edit-box" v-else>
								<text>{{ fItem.value }}</text>
								<!-- <u-input type="text" :border="false"
									:value="fItem.data" :clearable="false" disabled/> -->
							</view>

						</block>
					</view>
					<!-- <view class="detail-card-view" v-if="newHead == 3">
						<view class="detail-edit-title" v-if="poplistmp.content">内容</view>
						<view class="detail-edit-box" v-if="poplistmp.content">
							<text>{{ poplistmp.content }}</text>
						</view>
						<view class="detail-edit-title" v-if="poplistmp.images">图片</view>
						<view class="detail-edit-boxs" v-if="poplistmp.images">
							<view class="ops-box">
								<view class="ops-img"  v-for="(i,ind) in poplistmp.images" @click="preview(poplistmp.images,i)">
									<image class="ops-imgitem" :src="i"></image>
								</view>
							</view>
						</view>
					</view> -->
				</view>


				<view class="btn-group" style="border:none;">
					<view class="guan"  @click="submitPageShow = false">关闭</view>
					<!-- <u-button type="info" size="medium" @click="submitPageShow = false">关闭</u-button> -->
				</view>
			</view>
			<!-- <u-calendar v-model="showDate" mode="date" @change="timeChange"></u-calendar> -->
		</view>

		<u-select v-model="leishow" :list="leilist" @confirm="dinconfirm"></u-select>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				titleStyle:{
					fontWeight: 'bold',
					fontSize: '36rpx',
					color: '#111111',
				},
				value:'',

				list: [],
				page: 1,
				limit: 10,
				last_page: 1,
				status: "loadmore",
				uinfo:{},
				keyword:'',
				tablist:[
					{
						name: '全部'
					},
					{
						name: '待审核'
					},
					{
						name: '审核通过'
					},
					{
						name: '审核拒绝'
					},
				],
				current:0,
				isHead:1,
				checked:false,
				submitPageShow:false,
				teaminfo:{},
				leitype:'',//1悬赏 2项目圈 3名片
				bao_id:'',
				is_shouyi:0,
				poplist:[],
				poplistmp:{},
				newHead:1,//1悬赏订单 3名片 4团队订单
				leishow:false,
				leilist:[
					{
						value: '1',
						label: '我的订单'
					},
					{
						value: '4',
						label: '团队订单'
					}
				],
				leiinfo:{}
			}
		},
		onLoad(optione) {
			if(optione.leitype){
				this.leitype = optione.leitype
				this.newHead = optione.leitype
				if(optione.leitype == 3){
					this.isHead = 3
				}
			}
			if(optione.bao_id){
				this.bao_id = optione.bao_id
			}
			this.getList()
			this.fgetContent();//富文本
		},
		onShow() {
		},
		onReachBottom: function () {
			this.loadmore();
		},
		methods: {
			tabchange(e){
				this.current = e
				this.getClear()
			},
			getDetail(){
				this.navrouter("/pages/StudPage/Detail");
			},
			async getList(){//列表数据
				if(this.newHead == 1||this.newHead == 3){
					let lstatus = ''
					let type = ''
					if(this.leitype == 1){
						type = 'task'
					}else if(this.leitype == 2){
						type = 'quan'
					}else if(this.leitype == 3){
						type = 'card'
					}
					if(this.current == 0){
						lstatus = ''
					}else if(this.current == 1){
						lstatus = '1'
					}else if(this.current == 2){
						lstatus = '2'
					}else if(this.current == 3){
						lstatus = '3'
					}
					let res = await this.$u.api.homegetOrderList({
						page:this.page,
						keywords:this.keyword,
						status:lstatus,
						// type:type,
						id:this.bao_id
					});
					this.last_page = res.lastpage;
					let list = res.list;
					this.list = this.page == 1 ? list : [...this.list, ...list];	
					if(this.page >= this.last_page){
						this.status = 'nomore';
					}
				}else if(this.newHead == 4){
					//团队列表
					let status = ''

					let res = await this.$u.api.getOrderByTeam({
						page:this.page,
						keywords:this.keyword,
						status:status,
						is_shouyi:this.is_shouyi
					});
					this.last_page = res.lastpage;
					let list = res.list;
					this.list = this.page == 1 ? list : [...this.list, ...list];	
					if(this.page >= this.last_page){
						this.status = 'nomore';
					}
				}
				
				
			},
			async fgetContent(){
				let res = await this.$u.api.getContent({
					code:'tdddfwb'
				});
				this.teaminfo = res
			},
			loadmore() {
				let page = this.page;
				if (this.status == 'loadmore') {
					this.page++;
					this.getList();
				}
			},
			getfan(){
				uni.navigateBack()
			},
			headClick(e){
				this.isHead = e
				this.leitype = e
				this.newHead = e
				this.getClear()
			},
			changecheck(e){
				console.log(e)
				this.checked = e.value
				if(this.checked){
					this.current = 2
					this.is_shouyi = 1
				}else{
					this.is_shouyi = 2
				}

				this.getClear()
				// this.page = 1;
			  	// this.getList();
			},
			async newitemClick(item){
				
				this.submitPageShow = true
				let data = item.detail
				for(let i in data){
					if(data[i].type == 4){
						if(data[i].value){
							data[i].data = data[i].value.split(",");
						}
					
					}
				}
				this.poplist = data
				console.log(this.poplist)
				
				
			},
			getClear(){
				this.list = []
				this.page = 1,
				this.status= "loadmore"
				this.getList()
			},
			preview(data,i){
				uni.previewImage({
					current: i, //预览图片的下标
					urls: data//预览图片的地址，必须要数组形式，如果不是数组形式就转换成数组形式就可以
				})
			},
			gettandin(){
				this.leishow = true
			},
			dinconfirm(e){
				console.log(e)
				let value = e[0].value
				this.leiinfo = e[0]
				this.isHead = value
				this.leitype = value
				this.newHead = value
				this.getClear()

			}
		}
	}
</script>

<style scoped lang="scss">
	.content {
		min-height: 100vh;
		background-color: #f5f5f5;
		padding-bottom: 100rpx;
		.headview{
			padding: 20rpx 30rpx 10rpx;
			background-color: #fff;
			position: relative;
			min-height: 80rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			.icon_backs{
				position: absolute;
				width: 30rpx;
				height: 36rpx;
				left: 30rpx;
				
			}
			.headtab{
				position: relative;
				width: 420rpx;
				height: 80rpx;
				// background: #F5F5F5;
				border-radius: 39rpx;
				display: flex;
				flex-direction: row;
				align-items: center;
				padding: 5rpx;
				.tabview{
					width: 100%;
					border-radius: 39rpx;
					font-family: PingFang SC;
					font-weight: 500;
					font-size: 32rpx;
					color: #333333;
					display: flex;
					height: 100%;
					align-items: center;
					justify-content: center;
				}
				.tactive{
					background: linear-gradient(-82deg, #4BB6F0, #1D8DFD);
					color: #fff;
				}
			}

		}
		.sview{
			background-color: #fff;
			padding: 10rpx 30rpx;

		}
		.newsouview{
			background: #F3F4F6;
			border-radius: 34rpx;
			padding: 14rpx 20rpx;
			display: flex;
			flex-direction: row;
			align-items: center;
			// margin: 0 30rpx;
			.souicon{
				margin-right: 20rpx;
				width: 40rpx;
				height: 40rpx;
			}
			.soutit{
				margin-left: 20rpx;
				font-family: PingFang SC;
				font-weight: 500;
				font-size: 26rpx;
				color: #222222;
			}
			/deep/.u-input__input{
				min-height: 40rpx !important;
			}
		}

		.souview{
			background-color: #fff;
			padding: 20rpx 30rpx;
			display: flex;
			flex-direction: row;
			align-items: center;
			.shaiview{
				display: flex;
				flex-direction: row;
				align-items: center;
				padding: 15rpx;
				background: #EEEEEE;
				border-radius: 10rpx;
				.shainame{
					font-weight: 500;
					font-size: 24rpx;
					color: #51565D;
				}
				.icon_sx{
					width: 24rpx;
					height: 24rpx;
					margin-left: 10rpx;
				}
			}
			
			.souitem{
				height: 78rpx;
				background: #F5F5F5;
				border-radius: 39rpx;
				display: flex;
				align-items: center;
				flex-direction: row;
				padding: 0 23rpx;
				width: 100%;
				.icon_sousuo{
					width: 24rpx;
					height: 24rpx;
					margin-right: 15rpx;
				}
				.soubtn{
					margin-left: 20rpx;
					width: 100rpx;
					height: 50rpx;
					background: #3E65E5;
					border-radius: 25rpx;
					display: flex;
					align-items: center;
					justify-content: center;
					font-family: PingFang SC;
					font-weight: 500;
					font-size: 24rpx;
					color: #FFFFFF;
				}
			}
		}
		.fone{
			margin-top: 20rpx;
			.flist{
				display: flex;
				flex-direction: row;
				flex-wrap: wrap;
				.fitem{
					width: 25%;
					display: flex;
					flex-direction:column;
					align-items: center;
					justify-content: center;
					margin-bottom: 44rpx;
					text{
						display: inline-block;
						margin-top: 13rpx;
						font-family: PingFang SC;
						font-weight: 500;
						font-size: 24rpx;
						color: #666666;
					}
					.ficon{
						width: 80rpx;
						height: 80rpx;
					}
				}
			}
			.shenhe{
				height: 60rpx;
				background: #F3F6F9;
				border-radius: 10px;
				padding: 0 30rpx;
				display: flex;
				flex-direction: row;
				align-items: center;
				.shenitem{
					width: 33.33%;
					display: flex;
					flex-direction: row;
					align-items: center;
					border-right: 1rpx solid rgba(62,101,229,0.3);
					justify-content: center;
					.shenone{
						margin-right: 3rpx;
						width: 33rpx;
						height: 33rpx;
					}
					.shentit{
						font-family: PingFang SC;
						font-weight: 400;
						font-size: 24rpx;
						color: #3C66DE;

					}
				}
				.shenitem:last-child{
					border-right: none;
				}
			}

			.leiview{
				width: 100%;
				.leiscview{
					white-space: nowrap;
					// overflow-x: auto;
					.leiitem{
						display: inline-block;
						padding: 20rpx 40rpx;
						background: #EEEEEE;
						border-radius: 16rpx;
						font-family: PingFang SC;
						font-weight: 500;
						font-size: 24rpx;
						color: #666666;
						margin-right: 20rpx;
					}
					.lactive{
						background: #3E65E5;
						color: #fff;

					}
				}
				
			}
		}
		.list{
			display: flex;
			flex-direction: row;
			flex-wrap: wrap;
			margin-top: 30rpx;

			.item{
				width: 100%;
				display: flex;
				flex-direction: column;
				margin-bottom: 20rpx;
				background-color: #fff;
				border-radius: 10rpx;
				padding: 0 30rpx 20rpx;
				position: relative;
				// border: 1rpx solid #eee;
				// box-shadow: 0px 3rpx 9rpx 0px rgba(109,109,109,0.1);
				.itemone{
					display: flex;
					flex-direction: row;
					align-items: center;
					padding: 30rpx 0;
					border-bottom: 1rpx solid #EEEEEE;

					.xname{
						font-family: PingFang SC;
						font-weight: 500;
						font-size: 30rpx;
						color: #000;
					}
					.guan{
						position: absolute;
						right: 0;
						width: 140rpx;
						height: 44rpx;
						background: #3E65E5;
						border-radius: 22rpx 0rpx 2rpx 22rpx;
						display: flex;
						align-items: center;
						justify-content: center;
						font-weight: 500;
						font-size: 24rpx;
						color: #EAEFFF;
					}
				}
				.itemtwo{
					display: flex;
					flex-direction: row;
					flex-wrap: wrap;
					margin-top: 30rpx;
					.fenitem{
						display: flex;
						width: 50%;
						margin-bottom: 15rpx;
						align-items: center;
					    .fen{
							font-family: PingFang SC;
							font-weight: 400;
							font-size: 26rpx;
							color: #666666;
							width: 100%;
							display: inline-block;
						}
						.fennum{
							font-family: PingFang SC;
							font-weight: 500;
							font-size: 26rpx;
							color: #3E65E5;
							display: inline-block;
							margin-left: 8rpx;
						}
						.time{
							font-size: 24rpx;
						}
					}
				}
				.kaibot{
					display: flex;
					justify-content: flex-end;
					padding-top: 30rpx;
					margin-top: 20rpx;
					border-top: 1rpx solid #eee;
					.kaipview{
						padding: 14rpx 30rpx;
						background: #496EE7;
						border-radius: 10rpx;
						font-family: PingFang SC;
						font-weight: 500;
						font-size: 26rpx;
						color: #F5F5F5;
						margin-left: 30rpx;
					}
					.icon_phb{
						margin-right: 2rpx;
						width: 32rpx;
						height: 32rpx;
					}
					.pai{
						padding: 14rpx 30rpx;
						border: 2rpx solid #496EE7;
						border-radius: 10rpx;
						font-family: PingFang SC;
						font-weight: 500;
						font-size: 26rpx;
						color: #496EE7;
						display: flex;
						align-items: center;
						margin-left: 30rpx;
					}
				}
				.kao{
					font-family: PingFang SC;
					font-weight: 500;
					font-size: 28rpx;
					color: #666666;
					display: inline-block;
					margin-right: 5rpx;
					// padding: 20rpx 0;
					margin-top: 20rpx;
				}
				.time{
					font-weight: 500;
					font-size: 28rpx;
					color: #3E65E5;
				}
				.tubg{
					width: 100%;
					height: 330rpx;
					margin-bottom: 20rpx;
				}
				.botview{
					display: flex;
					flex-direction: column;
					padding: 20rpx ;
				}
				.biaoti{
					display: inline-block;
					font-family: PingFang SC;
					font-weight: bold;
					font-size: 26rpx;
					color: #333333;
				}
				.pjia{
					font-family: PingFang SC;
					font-weight: bold;
					font-size: 26rpx;
					color: #E53E3E;
					display: block;
					margin-top: 20rpx;
					.pnum{
						font-size: 36rpx;
					}
				}
			}
			.item:nth-child(even){
				margin-left: auto;
			}
		}
		.txt {
			white-space: nowrap;
			overflow: hidden;
			text-overflow: ellipsis;
		}
		.plr{
			padding: 0 30rpx;
		}
		.ftit{
			display: block;
			margin-bottom: 30rpx;
			font-family: PingFang SC;
			font-weight: bold;
			font-size: 36rpx;
			color: #111111;
		}



	}

	.newlist {
		margin: 10px 0;
	}

	.newitem {
		background-color: #fff;
		padding: 30rpx;
		margin: 0 0rpx 20rpx 0rpx;
		border-radius: 12px;
		.orderone{
			border-bottom: 1rpx solid #eee;
			padding: 0rpx 0 20rpx;
			display: flex;
			flex-direction: row;
			align-items: center;
			.fuzhi{
				margin-left: 20rpx;
				width: 28rpx;
				height: 28rpx;
			}
			.dinnum{
				font-family: PingFang SC;
				font-weight: bold;
				font-size: 28rpx;
				color: #333333;
			}
			
			.zt{
				font-family: PingFang SC;
				font-weight: 500;
				font-size: 24rpx;
				color: #2291FC;
				margin-left: auto;
			}
			.wei{
				color: #FC2222;
			}
		}

		.newitem_head {
			display: flex;
			flex-direction: row;
			align-items: center;
			border-bottom: 1rpx solid #eee;
			padding: 20rpx 0;

			.newitem_head_img {
				width: 85px;
				height: 85px;
				border-radius: 10rpx;
			}

			.newitem_head_right {
				display: flex;
				flex-direction: column;
				padding: 0 10rpx 0 20rpx;
				flex: 1;

				.newitem_head_tit {
					display: flex;
					flex-direction: row;
					align-items: center;
					margin-bottom: 15rpx;

					.title {
						font-size: 12px;
						font-family: PingFang SC;
						font-weight: 400;
						color: #000000;
					}

					.state {
						font-size: 12px;
						font-family: PingFang SC;
						font-weight: 400;
						color: #999999;
						margin-left: auto;
					}
				}

				.item_text {
					font-size: 12px;
					font-family: PingFang SC;
					font-weight: 400;
					color: #000000;
					display: block;
					margin-bottom: 15rpx;
				}
				.item_texts {
					font-size: 12px;
					font-family: PingFang SC;
					font-weight: 400;
					color: #333;
					display: flex;
					align-items: center;
					margin-bottom: 15rpx;
				}
				.zhengce{
					display: block;
					max-width: 215px;
					overflow: hidden;/*超出部分隐藏*/
					white-space: nowrap;/*不换行*/
					text-overflow:ellipsis;/*超出部分文字以...显示*/
				}
			}
		}

		.newitem_nav {
			display: flex;
			flex-direction: column;
			padding-top: 20rpx;
			.newitem_nav_item {
				display: flex;
				flex-direction: row;
				align-items: center;
				margin-top: 15rpx;

				.right_text {
					margin-left: auto;
				}
			}

			.newitem_nav_item>text {
				font-size: 12px;
				font-family: PingFang SC;
				font-weight: 400;
				color: #333333;
			}

		}
	}
	.headcontent{
		background-color: #fff;
		padding: 10px;
		margin: 10px 0;
		border-radius: 20rpx;
	}
	.chadin{
		font-family: PingFang SC;
		font-weight: 500;
		font-size: 28rpx;
		color: #333333;
	}

	.item_view {
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		// justify-content: space-between;
	}

	// 弹窗样式
	.submit-layer {
		position: fixed;
		z-index: 100;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background-color: rgba(0, 0, 0, 0.6);
		display: flex;
		align-items: center;
		justify-content: center;
		overflow-y: auto;

		.detail-card {
			width: 690rpx;
			margin: 0rpx 30rpx 30rpx;
			background: #fff;
			border-radius: 30rpx;
			display: flex;
			flex-direction: column;
			padding: 30rpx;
			position: relative;

			.detail-card-view {
				max-height: 465px;
				overflow-y: scroll;
			}

			/*z-index: 99;*/
			.detail-card-tit {
				width: 100%;
				text-align: center;
				font-weight: 500;
				font-size: 28rpx;
				color: #333333;
				padding: 0rpx 0 30rpx;
			}
			.dinname{
				font-family: PingFang SC;
				font-weight: bold;
				font-size: 36rpx;
				color: #333333;
				display: block;
				margin-bottom: 20rpx;
			}

			.detail-card-con {
				width: 100%;
				font-size: 26rpx;
				font-weight: 400;
				color: #333333;

				video {
					width: 100%;
				}
			}

			.detail-edit-title {
				width: 100%;
				font-size: 24rpx;
				font-weight: 600;
				color: #333;
				height: 56rpx;
				padding-top: 10rpx;
				padding-left: 4rpx;
				display: inline-flex;
				justify-content: space-between;
				align-items: center;
			}

			.detail-edit-box {
				width: 100%;
				height: 66rpx;
				background: #FCFEFF;
				border-radius: 14rpx;
				display: flex;
				align-items: center;
				padding: 0 20rpx;
				margin-bottom: 10rpx;
			}

			.detail-edit-boxs {
				width: 100%;
				// background: #FCFEFF;
				border-radius: 14rpx;
				display: flex;
				align-items: center;
				padding: 0 10rpx;
				margin-bottom: 10rpx;
			}
		}

	}

	.btn-group {
		padding-top: 10px;
		border-top: 1px solid #ccc;
		display: flex;
		justify-content: flex-start;
	}
	.mexuan{
		position: absolute;
		right: 24rpx;
		font-size: 25rpx;
		color: #333;
	}

	.ops-box {
		// width: 100%;
		// padding: 0rpx 30rpx 0rpx 0;
		// display: flex;
		// justify-content: flex-start;
		// align-items: center;
		// flex-wrap: wrap;
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
	}
	.guan{
		width: 400rpx;
		height: 78rpx;
		background: linear-gradient(-82deg, #4BB6F0, #1D8DFD);
		border-radius: 39rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		font-family: PingFang SC;
		font-weight: 500;
		font-size: 28rpx;
		color: #FFFFFF;
		margin: 0 auto;
	}
	.ops-close {
		position: absolute;
		right: -10rpx;
		top: -10rpx;
		width: 30rpx;
		height: 30rpx;
	}

	.ops-img {
		width: 170rpx;
		height: 170rpx;
		margin-right: 20rpx;
		position: relative;
		margin-bottom: 10rpx;
        margin-top: 5px;
		image {
			width: 100%;
			height: 100%;
		}
	}

	.ops-imgitem {
		border-radius: 5px;
	}

	.ops-add {
		width: 170rpx;
		height: 170rpx;
		margin-right: 30rpx;
		border-radius: 10rpx;
		position: relative;

		.ops-add-img {
			width: 100%;
			height: 100%;
			background: #eee;
			display: inline-flex;
			justify-content: center;
			align-items: center;
			border-radius: 5rpx;
		}
	}

	.immerse {
		width: 100%;
		height: calc(var(--status-bar-height) + env(safe-area-inset-top));
		background-color: #fff;
		// #ifdef APP-PLUS
		height: calc(var(--status-bar-height);
			// #endif
			z-index:100;

		}
</style>